<template>
	<view class="conbox">
		<view class="contab">
			<view class="cotabq" :class="{'istab' : num==index}" v-for="(item,index) in tab" :key="index"
				@click="chantab(index)">
				{{item}}
			</view>
		</view>
		<view class="connav">
			<view class="navtit">
				<up-icon name="map-fill" color="#10c696" size="18"></up-icon>
				<view class="" style="margin-left: 5rpx;">
					<view class="navname">{{arr.name}}</view>
					<view class="namediz">{{arr.address}}</view>
				</view>
			</view>
			<view class="navconter">
				<view class="img_wrap">
					<image :src="arr.image" mode=""></image>
				</view>
				<view class="detail">
					<view class="title">篮球 散客入场券<text style="font-size: 13px;;"> (30天内有效)</text></view>
					<view class="sonpric" v-if="num==0">原价{{arr.original_price}}元/张</view>
					<view class="sonpric" v-else>原价{{arr.free_price}}元/张</view>
					<view class="contet">购买入场券后出示二维码入场</view>
				</view>
			</view>
			<view class="navbutt">
				<view class="navbay">
					<view class="navnum">购买数量</view>
					<view class="addbxo">
						<view class="delnum" @click="delnum">-</view>
						<view class="numshul">{{shul}}</view>
						<view class="addnum" @click="addnum">+</view>
					</view>
				</view>
				<view class="price" v-if="num==0" @click="chenyhq">
					<view class="priquan">优惠券</view>
					<view class="jaiq">￥{{yhq}}<up-icon name="arrow-right" color="#a6a6a6" size="16"></up-icon></view>
				</view>
			</view>
		</view>
		<view class="buttbox" v-if="num==0">
			<view class="buttit">
				<text>更多优惠</text>
				<view class="buy" v-if="level == 0" @click="handleBuy">立即购卡</view>
			</view>
			<view class="listbox" v-for="(item,index) in list" :key="index">
				<view class="lilfet">
					<!-- <image class="conimg" :src="item.pic" mode=""></image> -->
					<view  class="text">{{item.tit}}</view>
					
				</view>
				<view class="liri">
					<view class="pic">￥{{item.price}}/张</view>
					<!-- <view class="liboxz" @click="chengebol(item,index)">
						<view v-if="item.bol" class="boxxzq"></view>
					</view> -->
					<view class="liboxz">
						<view v-if="item.bol" class="boxxzq"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="wxts" v-if="num==1">
			<view class="">温馨提示</view>
			<view class="txnav">闲时入场券仅支持平台规定的闲时时段入场核销，请根据自己的事假安排下单</view>
			<view class="isnav">【闲时时段为周一至周五17:00前(节假日除外)】</view>
		</view>
		<view class="relief">
			<view class="rebxo" @click="chanrel">
				<image v-if="bol" class="relimg" src="../../static/iamges/Group 179.png" mode=""></image>
			</view>
			<view class="relte">本人已经阅读并接受<text style="color: #10c696;" @click="gotomz">《免责声明》</text></view>
		</view>
		<view class="zhifu">
			<view class="money"><text style="font-size: 14px; color: #787878;">合计：</text><text
					style="font-size: 12px;">￥</text>{{totalPrice-yhq}}</view>
			<view class="tijiao" :class="{'turjiao':bol}" @click="tijiao">提交订单</view>
		</view>
		<up-popup :show="show1" @close="close1" round="20rpx">
			<view class="popu">
				<view style="text-align: center;" v-if="coupon.length <= 0" class="intext">--暂无优惠券--</view>
				<view class="poli" v-for="(item,index) in coupon" :key="index">
					<view class="">
						<view class="potit">包场{{item.money}}元折扣券</view>
						<view class="potiem">有效期至{{item.dead_time_text}}</view>
						<view class="buttbox1">
							<view class="boxleft" @click="shiyong(item)">立即使用</view>
							<view class="boxri" @click="show2=true">查看详情</view>
						</view>
					</view>
					<image class="popimage" src="/static/logo.png" mode=""></image>
				</view>
			</view>
		</up-popup>
		<up-popup :show="bol1" @close="gunb">
		    <view class="zhifufs">
				<view class="zhifudd" @click="yezf">余额支付</view>
				<view class="zhifudd" @click="wxzf">微信支付</view>
				<view style="height: 10rpx;background-color: #dedede;"></view>
				<view class="qxzhifu" @click="bol1=false">取消</view>
			</view>
		</up-popup>
		<up-popup :show="bola" @close="gunb1" mode="center" round="40rpx">
		   <view class="viptitbo">
			   <view class="viptit">温馨提示</view>
			   <view class="viptext">您还不是会员，成为会员后可享受会员折扣</view>
			   <view class="vipbutt">
				   <view class="vipqx" @click="gunb1">取消</view>
				   <view class="vipkt" @click="govip">去开通</view>
			   </view>
		   </view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,onMounted
	} from 'vue';
	import request from '../../utils/request';
	import {onLoad} from '@dcloudio/uni-app'
	
	let level=ref(1)
	onLoad((options)=>{
		const userinfo = uni.getStorageSync('userinfo')
		level.value=userinfo.level
		token.value= uni.getStorageSync('token')
		places_id.value= options.id
		request.post('Places/read',{data:{
			id:options.id,
		},header:{
			"token":token.value
		}}).then(res=>{
			arr.value=res.data
			price.value=res.data.original_price
			pic.value=res.data.original_price
			if(level.value == 1) {
				price.value=res.data.member1_price
				pic.value=res.data.member1_price
			}else if (level.value == 2) {
				price.value=res.data.member2_price
				pic.value=res.data.member2_price
			}else if (level.value == 3) {
				price.value=res.data.member3_price
				pic.value=res.data.member3_price
			}
			 const itemsToAdd = [
			      { price: parseFloat(res.data.member1_price),tit:'银卡会员', bol:  level.value == 1 ? true : false },
			      { price: parseFloat(res.data.member2_price),tit:'金卡会员',bol: level.value == 2 ? true : false },
			      { price: parseFloat(res.data.member3_price),tit:'钻石会员', bol: level.value == 3 ? true : false }
			    ];
			itemsToAdd.forEach(item => list.value.push(item));
			console.log(list.value);
		}).catch(err=>{
			console.log(err);
		})
	})
	
	let arr=ref()
	let bola=ref(false)
	let places_id=ref()
	let type1=ref(2)
	let type2=ref(1)
	let token=ref('')
	let bol = ref(false)
	let pic = ref(35.00)
	let shul = ref(1)
	let num = ref(0)
	let yhq=ref(0)
	let show1=ref(false)
	let coupon=ref([])
	let tab = ref(['散客入场', '闲时入场'])
	let bol1=ref(false)
	let paytype=ref()
	let coupon_id=ref('')
	let price = ref('')
	let list = ref([
	])
	const chantab = (index) => {
		num.value = index
		yhq.value=0
		if(index==0){
			type2.value=1
			pic.value = price.value
		}else if(index==1){
			type2.value=2
			pic.value = arr.value.free_price
			coupon_id.value=''
		}
	}
	const chanrel = () => {
		bol.value = !bol.value
	}
	const gotomz = () => {
		bol.value = true
		uni.navigateTo({
			url: '/pages/disclaimer/disclaimer'
		})
	}
	const totalPrice = computed(() => {
		return (shul.value * pic.value).toFixed(2);
	});
	const delnum = () => {
		console.log(111);
		if (shul.value > 0 ) {
			shul.value -= 1
			
		}
		if(shul.value==0){
			yhq.value=0
		}
	}
	const addnum = () => {
		shul.value += 1
	}
	const chengebol = (item,index) => {
		console.log(arr.value.member1_price);
		if(level.value==0){
			bola.value=true
		}else if(level.value==1){
			if(item.price==arr.value.member1_price){
				item.bol=!item.bol
				pic.value=arr.value.member1_price
				if(item.bol==false){
					pic.value=arr.value.original_price
				}
			} 
		} else if(level.value==2){
			if(item.price==arr.value.member2_price){
				item.bol=!item.bol
				pic.value=arr.value.member2_price
				if(item.bol==false){
					pic.value=arr.value.original_price
				}
			}
		} else if(level.value==3){
			if(item.price==arr.value.member3_price){
				item.bol=!item.bol
				pic.value=arr.value.member3_price
				if(item.bol==false){
					pic.value=arr.value.original_price
				}
			}
		} 
		price.value = pic.value
	}
	const shiyong=(item)=>{
		show1.value=false
		yhq.value=item.money
		coupon_id.value= item.id
	}
	const chenyhq=()=>{
		show1.value=true
		request.post('Usercoupons/lists',{data:{
			type:'1, 3',
			status:'1'
		},header:{
			"token":token.value
		}}).then(res=>{
			console.log(res);
			coupon.value=res.data
			console.log(coupon.value);
		}).catch(err=>{
			console.log(err);
		})
	}
	const close1=()=>{
		show1.value=false
	}
	const tijiao=()=>{
		if(!bol.value){
			uni.showToast({
				title:'请同意协议',
				icon:'none'
			}) 
		}else{
			bol1.value=true
		}
		
	}
	const gunb=()=>{
		bol1.value=false
	}
	const zhifu=()=>{
		// uni.requestSubscribeMessage({
		// 	tmplIds: ['ropT_b9f-HPW6onEWhc5q2OTnx62V4aAbM8Xe3kyfP0'],
		// 	success(res) {
				request.post('Price/createOrder',{data:{
					data:`type1|${type1.value},type2|${type2.value},price_id|,places_id|${places_id.value},start_time|,end_time|,number|,coupon_id|${coupon_id.value},num|${shul.value},paytype|${paytype.value},realname|,mobile|,sex|`,
					times:'1||,2||'
				},header:{
					"token":token.value
				}}).then(res=>{
					console.log(res);
					if(paytype.value=='-1' && res.code == 1){
						console.log(111);
						wx.requestPayment({
						  timeStamp:res.data.timeStamp,
						  nonceStr: res.data.nonceStr,
						  package: res.data.package,
						  signType:  res.data.signType,
						  paySign: res.data.paySign,
						  success :(res)=> { 
							  uni.$u.toast('支付成功')
							  setTimeout(() => {
							  	uni.switchTab({
							  		url: '/pages/order/order'
							  	})
							  }, 1200)
						  },
						  fail :(res)=> { 
							  uni.$u.toast('取消支付')
							  setTimeout(() => {
							  	uni.switchTab({
							  		url: '/pages/myde/myde'
							  	})
							  }, 1200)
						  }
						})
					} else if (res.code == 1){
						uni.$u.toast(res.msg)
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/order/order'
							})
						}, 1200)
					} else {
						uni.$u.toast(res.msg)
					}
				}).catch(err=>{
					console.log(err);
				})
				
		// 	},
		// 	fail(err) {
		// 		console.log(err, '失败');
		// 		// 处理订阅失败后的逻辑
		// 	}
		// })
		
	}
	const yezf=()=>{
		paytype.value=1
		// zhifu()
		uni.requestSubscribeMessage({
			tmplIds: ['ropT_b9f-HPW6onEWhc5q2OTnx62V4aAbM8Xe3kyfP0'],
			success(res) {
				zhifu()
			},
			fail(err) {
				console.log(err, '失败');
				// 处理订阅失败后的逻辑
			}
		})
		bol1.value=false
	}
	const wxzf=()=>{
		paytype.value=-1
		uni.requestSubscribeMessage({
			tmplIds: ['ropT_b9f-HPW6onEWhc5q2OTnx62V4aAbM8Xe3kyfP0'],
			success(res) {
				zhifu()
			},
			fail(err) {
				console.log(err, '失败');
				// 处理订阅失败后的逻辑
			}
		})
		// bol1.value=false
	}
	const gunb1=()=>{
		bola.value=false
	}
	const govip=()=>{
		uni.navigateTo({
			url:'/pages/myvip/myvip'
		})
	}
	const handleBuy = () => {
		uni.reLaunch({
			url: '/pages/myvip/myvip'
		})
	}
</script>

<style scoped lang="scss">
	.conbox {
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;
	}

	.contab {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		font-size: 14px;
	}

	.cotabq {
		height: 60rpx;
		line-height: 60rpx;
	}

	.istab {
		color: #10c696;
		border-bottom: 1px solid #10c696;
	}

	.connav {
		width: 710rpx;
		/* height: 590rpx; */
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 28rpx;
		box-sizing: border-box;
		box-shadow: 0 0 17px -10px rgba(0, 0, 0, .3);

	}

	.navtit {
		width: 660rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;
		box-sizing: border-box;
		padding-top: 36rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #e6e6e6;
	}

	.navname {
		font-size: 14px;
	}

	.namediz {
		font-size: 12px;
		color: #787878;
	}

	.navconter {
		width: 660rpx;
		height: 230rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e6e6e6;
		
		.img_wrap {
			width: 180rpx;
			height: 180rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
			
		.detail {
			display: flex;
			flex-direction: column;
			width: calc(100% - 200rpx);
			height: 180rpx;
			
			.title {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				word-break: break-all;
				margin-bottom: 12rpx;
			}
		}
	}

	.sonpric {
		font-size: 13px;
		color: #10c696;
		flex: 1;
	}

	.contet {
		font-size: 13px;
		color: #787878;
	}

	.navbutt {
		width: 660rpx;
		/* height:234rpx; */
		margin: 0 auto;
	}

	.navbay {
		width: 660rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;
	}

	.navnum {
		font-size: 13px;
		color: #787878;
	}

	.addbxo {
		width: 216rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.delnum {
		width: 60rpx;
		height: 50rpx;
		background-color: #f7f8fa;
		line-height: 50rpx;
		text-align: center;
		font-size: 24px;
	}

	.numshul {
		width: 80rpx;
		height: 50rpx;
		background-color: #f2f3f5;
		line-height: 50rpx;
		text-align: center;

	}

	.addnum {
		width: 60rpx;
		height: 50rpx;
		background-color: #f2f3f5;
		line-height: 50rpx;
		text-align: center;
		font-size: 24px;
	}

	.price {
		width: 660rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.priquan {
		font-size: 13px;
		color: #787878;
	}

	.jaiq {
		display: flex;
		align-items: center;
		font-size: 12px;
	}

	.buttbox {
		width: 710rpx;
		height: fit-content;
		border-radius: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
		box-shadow: 0 0 17px -10px rgba(0, 0, 0, .3);
		background-color: #fff;
		margin: 0 auto;
		margin-top: 28rpx;
		box-sizing: border-box;
	}

	.buttit {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
		
		text {
			font-size: 28rpx;
		}
		
		.buy {
			padding: 0 24rpx;
			width: fit-content;
			height: 64rpx;
			line-height: 64rpx;
			background-color: #10c696;
			color: #fff;
			font-size: 26rpx;
			border-radius: 32rpx;
			box-sizing: border-box;
		}
	}

	.listbox {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.lilfet {
		display: flex;
		align-items: center;
		
		.text {
			font-size: 28rpx;
		}
	}

	.conimg {
		width: 100rpx;
		height: 100rpx;
		margin-right: 10rpx;
	}

	.liri {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #363636;
	}

	.liboxz {
		width: 34rpx;
		height: 34rpx;
		border: 1px solid #8c8c8c;
		border-radius: 50%;
		margin-left: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.boxxzq {
		width: 28rpx;
		height: 28rpx;
		background-color: #10c696;
		border-radius: 50%;
	}

	.relief {
		margin-top: 60rpx;
		margin-left: 30rpx;
		padding-bottom: 150rpx;
		display: flex;
		align-items: center;
		font-size: 14px;
		box-sizing: border-box;
	}

	.rebxo {
		width: 30rpx;
		height: 30rpx;
		border: 1px solid #8c8c8c;
		margin-right: 5rpx;
		border-radius: 50%;
		box-sizing: border-box;
	}

	.relimg {
		width: 30rpx;
		height: 30rpx;
	}

	.zhifu {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
	}

	.money {
		width: 470rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 30rpx;
		color: #10c696;
	}

	.tijiao {
		width: 280rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		background-color: #999;
	}

	.turjiao {
		background-color: #10c696;
	}

	.wxts {
		margin-top: 64rpx;
		margin-left: 28rpx;
		margin-right: 60rpx;
		font-size: 13px;
	}

	.txnav {
		margin-top: 36rpx;
		margin-bottom: 26rpx;
	}

	.isnav {
		text-align: center;
		color: red;
	}
	.popu{
		width: 100%;
		height: 500rpx;
		padding-top: 20rpx;
	}
	.poli{
		width: 710rpx;
		height: 210rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		box-shadow:0 0 17px -9px rgba(0,0,0,.3);
		display: flex;
		padding: 0 20rpx;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
	}
	.potit{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 14px;
	}
	.popimage{
		width: 180rpx;
		height: 140rpx;
	}
	.potiem{
		height: 40rpx;
		line-height: 40rpx;
		font-size: 12px;
		margin-bottom: 10rpx;
	}
	.buttbox1{
		display: flex;
		align-items: center;
	}
	.boxleft{
		width: 132rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #10c696;
		color: #fff;
		text-align: center;
		font-size: 13px;
		border-radius: 30rpx;
	}
	.boxri{
		width: 132rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #fff;
		color: #10c696;
		text-align: center;
		font-size: 13px;
		border-radius: 30rpx;
		margin-left: 30rpx;
		border: 1px solid #10c696;
		
	}
	.zhifufs{
		width: 100%;
		height: 340rpx;
	}
	.zhifudd{
		width: 100%;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
	}
	.qxzhifu{
		width: 100%;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
	}
	.viptitbo{
		width: 690rpx;
		height: 500rpx;
	}
	.viptit{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 20px;
		margin-top: 30rpx;
	}
	.viptext{
		width: 100%;
		text-align: center;
		margin-top: 100rpx;
		margin-bottom: 100rpx;
	}
	.vipbutt{
		display: flex;
		height: 130rpx;
		align-items: center;
	}
	.vipqx{
		width: 50%;
		border-right: 1px solid #e6e6e6;
		text-align: center;
	}
	.vipkt{
		width: 50%;
		color:#10c696;
		text-align: center;
	}
</style>